<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
            margin: 30px auto;
        }
        table th,table td{
            width: 100px;
            height: 30px;
            border: 1px solid black;
            text-align: center;
        }
        span:hover{
            cursor: pointer;
        }
    </style>
    <script src="./jquery-3.5.0/jquery-3.5.0.min.js"></script>
    <script>
        $(function(){
            //1.获取用户名和密码
            var obj={
                "password": "123321",
                "username": "admin1"
            }
            //2.发送登录请求，获取token
            var baseUrl='http://182.92.83.218:7788';
            $.ajax({
                url:baseUrl+'/user/login',
                type:'POST',
                contentType: "application/json; charset=utf-8",
                data:JSON.stringify(obj),
                success:function(data){
                    console.log(data.data.token);
                    sessionStorage.setItem("token",data.data.token)
                }

            });
            //3.携带token,获取所有用户数据
            var token=sessionStorage.getItem("token")
            // console.log(token)
            function getUsers(){
                $.ajax({
                url:baseUrl+'/baseUser/findAll',
                type:'GET',
                headers:{
                    "Authorization":token
                },
                success:function(data){
                    console.log(data);
                    var users=data.data;
                    users.forEach(function(item,index){
                       var tr=$(`<tr>
                       <td>`+item.id+`</td>
                       <td>`+item.username+`</td>
                       <td>`+item.realname+`</td>
                       <td>`+item.politicsStatus+`</td>
                       <td>`+item.gender+`</td>
                       <td>`+item.status+`</td>
                       <td>`+item.telephone+`</td>
                       <td>
                            <span>删除</span>
                       </td>
                       </tr`);
                       $("tbody").append(tr);
                    });

                }
            })
            }
            getUsers()
            //4.给删除按钮绑定事件(事件代理)
            $('tbody').on('click','span',function(){
                //1.获取id
                var id=$(this).parents('tr').children().eq(0).text();
                console.log(id);
                //2.发送删除请求
                $.ajax({
                    url:baseUrl+'/baseUser/deleteById?id='+id,
                    type:'GET',
                    headers:{
                        "Authorization":token
                    },
                    success:function(data){
                        console.log(data);
                        if(data.status==200){
                            //清空tbody中的tr
                            $('tbody').empty();
                            //3.刷新页面
                            getUsers()
                        }
                    }
                })
               

            })
        })
    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>姓名</th>
                <th>角色</th>
                <th>性别</th>
                <th>状态</th>
                <th>手机号</th>
                <th>操作</th>    
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    
</body>
</html>